<template>
  <div class="page">
    <div class="page-title">排污限期整改</div>

    <div class="page-content">
      <div class="page-content-screen">
        <div class="screen">
          <vc-filter :menus="screen">
            <template #search>
              <search-input :width="230" v-model="searchTxt" title="关键字" placeholder="请输入企业名称或通知书编号" @enter="handlerInput" @clear="handlerInput" />
            </template>
            <div class="total">共计<sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>条</div>
          </vc-filter>
        </div>
      </div>
      <div>
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="PAGE_SIZE"
          :pageNum="queryData.pageNum"
          :defaultSort="{ field: 'issuedDate', order: 'desc' }"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </div>
    <vc-dialog v-model="showDetailModal" :title="`排污限期整改详情${detailsTableData.length}次`" width="800">
      <div class="detail-table">
        <vc-table border :maxHeight="350" :columns="detailsColumn" :tableData="detailsTableData" />
      </div>
    </vc-dialog>
  </div>
</template>

<script lang="ts" setup>
import searchInput from '@/components/page-search/index.vue';
import { getPermitRectification } from '../apis';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { usePage } from '@/use/usePage';

const { PAGE_SIZE, screen, queryData } = useScreen();
const { columns, showDetailModal, detailsColumn, detailsTableData } = useTable();

const { loading, error, run } = useRequest(getPermitRectification, {
  defaultParams: [queryData],
  onSuccess: (data) => {
    totalNum.value = data?.total;
    tableData.value = data.values;
  },
  onError: () => {
    tableData.value = [];
  }
});

const { tableData, totalNum, searchTxt, handlerInput, handleCurrentChange, sortChange } = usePage(queryData, run);
</script>

<style lang="scss" scoped>
@import '../index.scss';
.page-content {
  :deep(.details) {
    color: #1382ef;
    cursor: pointer;
    user-select: none;
  }
}
</style>
